<template>
  <div class="list f-cb">
    <div class="f-cb" style="padding: 5px 0 10px">
      <ul class="typeList f-cb fl">
        <li
          v-for="item in typeList"
          :key="item.period"
          @click="PeriodChange(item.period)"
          :class="OtherSubmit.period == item.period ? 'hover' : ''"
        >
          {{ item.value }}
        </li>
      </ul>
      <el-checkbox v-model="YearOnYear" class="fl YearOnYear">{{$t('info.info_statement.56hzbiocpo00')}}</el-checkbox>
      <div class="rights fr">
        {{ $t('info.info_statement.56hzbiocqb00') }}
        <el-select
          v-model="value"
          :placeholder="$t('info.info_statement.56hzbiocqfk0')"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="table f-cb">
      <div v-for="(item, parentIndex) in list" :key="item._id">
        <ul v-if="value == parentIndex">
          <li
            v-for="(itemTitle, TitleIndex) in dataList"
            :key="itemTitle.Field"
            class="f-cb"
          >
            <p class="first">{{ itemTitle.title }}</p>
            <p
              class="on sec"
              v-html="ratio(parentIndex, itemTitle.Field, list, itemTitle.show)"
              v-if="YearOnYear"
            ></p>
            <p class="three">
              {{ dealNum(item[itemTitle.Field], itemTitle.show) }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {get_charts} from '@/assets/js/API/info.js';
export default {
  props: ["OtherSubmit", "submit"],
  data() {
    return {
      typeList: [],
      HKEXNav: [
        { period: 4, value: this.$t('info.info_statement.56hzbiocqio0'), name: "annual_report" },
        { period: "2:2", value: this.$t('info.info_statement.56hzbiocqlk0'), name: "Mid_report" },
        { period: "1:1", value: this.$t('info.info_statement.56hzbiocqp40'), name: "Quarterly_report" },
        { period: "3:3", value: this.$t('info.info_statement.56hzbiocqrw0'), name: "Q3_report" },
      ],
      USNav: [
        { period: 4, value: "FY" },
        { period: "1:1", value: "Q1" },
        { period: "5:2", value: "Q6" },
        { period: "6:3", value: "Q9" },
      ],
      YearOnYear: true,
      options: [],
      HKEX: [
        // {title:"截止日期",Field:"report_date",show:true},
        // {title:"财报类型",Field:"report_type",show:true},
        { title: this.$t('info.info_statement.56hzbiocquo0'), Field: "close_date", show: true, name: "lkname22" },
        { title: this.$t('info.info_statement.56hzbiocqxg0'), Field: "currency", show: true, name: "lkname23" },
        {
          title: this.$t('info.info_statement.56hzbiocr1s0'),
          Field: "cash_flows",
          name: "lkname1",
        },
        { title: this.$t('info.info_statement.56hzbiocr4k0'), Field: "depreciation_sales", name: "lkname2" },
        { title: this.$t('info.info_statement.56hzbiocr7o0'), Field: "interest_paid", name: "lkname3" },
        { title: this.$t('info.info_statement.56hzbiocra40'), Field: "dividend_paid", name: "lkname4" },
        {
          title: this.$t('info.info_statement.56hzbiocrd40'),
          Field: "tax_refunded_paid",
          name: "lkname5",
        },
        { title: this.$t('info.info_statement.56hzbiocrg80'), Field: "add_fixed_assets", name: "lkname6" },
        { title: this.$t('info.info_statement.56hzbiocrio0'), Field: "investment_increase", name: "lkname7" },
        { title: this.$t('info.info_statement.56hzbiocrlw0'), Field: "sale_fixed_assets", name: "lkname8" },
        { title: this.$t('info.info_statement.56hzbiocroo0'), Field: "investment_reduction", name: "lkname9" },
        {
          title: this.$t('info.info_statement.56hzbiocrt40'),
          Field: "cash_flow_related_parties",
          name: "lkname10",
        },
        {
          title: this.$t('info.info_statement.56hzbiocrw80'),
          Field: "flow_investment_activities",
          name: "lkname11",
        },
        { title: this.$t('info.info_statement.56hzbiocs0k0'), Field: "new_loan", name: "lkname12" },
        { title: this.$t('info.info_statement.56hzbiocs340'), Field: "loan_repayment", name: "lkname13" },
        { title: this.$t('info.info_statement.56hzbiocs640'), Field: "deferred_income", name: "lkname21" },
        {
          title: this.$t('info.info_statement.56hzbiocs8g0'),
          Field: "instrument_financing",
          name: "lkname24",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsao0'),
          Field: "related_persons",
          name: "lkname15",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsd00'),
          Field: "repayment_instrument",
          name: "lkname16",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsfk0'),
          Field: "financing_activities",
          name: "lkname17",
        },
        { title: this.$t('info.info_statement.56hzbiocsi80'), Field: "net_cash", name: "lkname18" },
        { title: this.$t('info.info_statement.56hzbiocskg0'), Field: "initial_cash", name: "lkname19" },
        { title: this.$t('info.info_statement.56hzbiocsms0'), Field: "final_cash", name: "lkname20" },
      ],
      CNH: [
        // {title:"交易所市场",Field:"market",show:true},
        {
          title: this.$t('info.info_statement.56hzbiocsp40'),
          Field: "report_date",
          show: true,
          name: "lhname57",
        },
        // {title:"财报类型",Field:"report_type",show:true},
        { title: this.$t('info.info_statement.56hzbiocqxg0'), Field: "currency", show: true, name: "lkname23" },
        {
          title: this.$t('info.info_statement.56hzbiocsrc0'),
          Field: "sell_cash",
          name: "lhname1",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsto0'),
          Field: "deposit_increase",
          name: "lhname2",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsvs0'),
          Field: "central_banks",
          name: "lhname3",
        },
        {
          title: this.$t('info.info_statement.56hzbiocsy40'),
          Field: "other_finance",
          name: "lhname4",
        },
        {
          title: this.$t('info.info_statement.56hzbioct0c0'),
          Field: "received_insurance",
          name: "lhname5",
        },
        {
          title: this.$t('info.info_statement.56hzbioct2o0'),
          Field: "received_again_insurance",
          name: "lhname6",
        },
        {
          title: this.$t('info.info_statement.56hzbioct4s0'),
          Field: "protect_savings",
          name: "lhname7",
        },
        {
          title: this.$t('info.info_statement.56hzbioct740'),
          Field: "increase_trading_financial",
          name: "lhname8",
        },
        {
          title: this.$t('info.info_statement.56hzbioct9s0'),
          Field: "interest_handling_commission",
          name: "lhname9",
        },
        {
          title: this.$t('info.info_statement.56hzbioctc40'),
          Field: "net_increase_funds",
          name: "lhname10",
        },
        {
          title: this.$t('info.info_statement.56hzbioctec0'),
          Field: "loans_advances_reduce",
          name: "lhname11",
        },
        {
          title: this.$t('info.info_statement.56hzbioctgo0'),
          Field: "repurchase_business",
          name: "lhname12",
        },
        { title: this.$t('info.info_statement.56hzbioctj00'), Field: "tax_refund", name: "lhname13" },
        {
          title: this.$t('info.info_statement.56hzbioctls0'),
          Field: "other_business_activities",
          name: "lhname14",
        },
        {
          title: this.$t('info.info_statement.56hzbiocto00'),
          Field: "cash_inflow",
          name: "lhname15",
        },
        {
          title: this.$t('info.info_statement.56hzbioctqc0'),
          Field: "labor_payment",
          name: "lhname16",
        },
        {
          title: this.$t('info.info_statement.56hzbioctsg0'),
          Field: "loans_advances_add",
          name: "lhname17",
        },
        {
          title: this.$t('info.info_statement.56hzbioctus0'),
          Field: "deposit_central_bank",
          name: "lhname18",
        },
        {
          title: this.$t('info.info_statement.56hzbioctww0'),
          Field: "pay_payment",
          name: "lhname19",
        },
        {
          title: this.$t('info.info_statement.56hzbioctz00'),
          Field: "interest_handling_charges",
          name: "lhname20",
        },
        {
          title: this.$t('info.info_statement.56hzbiocu180'),
          Field: "policy_dividend",
          name: "lhname21",
        },
        {
          title: this.$t('info.info_statement.56hzbiocu3g0'),
          Field: "pay_employees",
          name: "lhname22",
        },
        { title: this.$t('info.info_statement.56hzbiocu5s0'), Field: "taxes_fees", name: "lhname23" },
        {
          title: this.$t('info.info_statement.56hzbiocu800'),
          Field: "operating_activities",
          name: "lhname24",
        },
        {
          title: this.$t('info.info_statement.56hzbiocua80'),
          Field: "cash_outflow",
          name: "lhname25",
        },
        {
          title: this.$t('info.info_statement.56hzbiocr1s0'),
          Field: "cash_flow_two",
          name: "lhname26",
        },
        {
          title: this.$t('info.info_statement.56hzbiocuck0'),
          Field: "recovery_investment",
          name: "lhname27",
        },
        {
          title: this.$t('info.info_statement.56hzbiocueo0'),
          Field: "income_investment",
          name: "lhname28",
        },
        {
          title: this.$t('info.info_statement.56hzbiocuh40'),
          Field: "long_term_recovery",
          name: "lhname29",
        },
        {
          title: this.$t('info.info_statement.56hzbiocuj80'),
          Field: "other_business_units",
          name: "lhname30",
        },
        {
          title: this.$t('info.info_statement.56hzbioculg0'),
          Field: "pledge_term_deposit",
          name: "lhname31",
        },
        {
          title: this.$t('info.info_statement.56hzbiocuog0'),
          Field: "other_investment",
          name: "lhname32",
        },
        {
          title: this.$t('info.info_statement.56hzbiocur00'),
          Field: "gold_subtotal",
          name: "lhname33",
        },
        {
          title: this.$t('info.info_statement.56hzbiocut80'),
          Field: "flow_investment_activities",
          name: "lhname58",
        },
        {
          title: this.$t('info.info_statement.56hzbiocuvk0'),
          Field: "build_assets",
          name: "lhname34",
        },
        { title: this.$t('info.info_statement.56hzbiocuxs0'), Field: "paid_investment", name: "lhname35" },
        { title: this.$t('info.info_statement.56hzbiocv080'), Field: "pledge_loans", name: "lhname36" },
        {
          title: this.$t('info.info_statement.56hzbiocv2k0'),
          Field: "subsidiary",
          name: "lhname37",
        },
        {
          title: this.$t('info.info_statement.56hzbiocv4w0'),
          Field: "pledge_terms",
          name: "lhname38",
        },
        {
          title: this.$t('info.info_statement.56hzbiocv700'),
          Field: "other_payments",
          name: "lhname39",
        },
        {
          title: this.$t('info.info_statement.56hzbiocv940'),
          Field: "outflow_subtotal",
          name: "lhname40",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvbc0'),
          Field: "absorbing_investment",
          name: "lhname41",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvdo0'),
          Field: "shareholder_investment",
          name: "lhname42",
        },
        { title: this.$t('info.info_statement.56hzbiocvfs0'), Field: "bond_cash", name: "lhname43" },
        {
          title: this.$t('info.info_statement.56hzbiocvhw0'),
          Field: "other_financing",
          name: "lhname44",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvk80'),
          Field: "financing_activities",
          name: "lhname45",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvmg0'),
          Field: "debt_repayment",
          name: "lhname46",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvow0'),
          Field: "dividend_distribution",
          name: "lhname47",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvr40'),
          Field: "shareholders",
          name: "lhname48",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvt80'),
          Field: "purchase_subsidiaries",
          name: "lhname49",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvvk0'),
          Field: "other_fina_pay",
          name: "lhname50",
        },
        {
          title: this.$t('info.info_statement.56hzbiocvxw0'),
          Field: "capital_payment",
          name: "lhname51",
        },
        {
          title: this.$t('info.info_statement.56hzbiocw040'),
          Field: "outflow_financing_activitie",
          name: "lhname52",
        },
        {
          title: this.$t('info.info_statement.56hzbiocw280'),
          Field: "cash_flows",
          name: "lhname53",
        },
        {
          title: this.$t('info.info_statement.56hzbiocw4k0'),
          Field: "exchange_fluctuation",
          name: "lhname54",
        },
        {
          title: this.$t('info.info_statement.56hzbiocw6w0'),
          Field: "initial_cash",
          name: "lhname55",
        },
        {
          title: this.$t('info.info_statement.56hzbiocwag0'),
          Field: "final_cash",
          name: "lhname56",
        },
      ],
      US: [
        { title: this.$t('info.info_statement.56hzbiocquo0'), Field: "close_date", show: true, name: "lkname22" },
        { title: this.$t('info.info_statement.56hzbiocqxg0'), Field: "currency", show: true, name: "lkname23" },
        { title: this.$t('info.info_statement.56hzbiocwcw0'), Field: "net_profit", name: "lname2" },
        { title: this.$t('info.info_statement.56hzbiocwf00'), Field: "depreciation_promote", name: "lname3" },
        { title: this.$t('info.info_statement.56hzbiocwhw0'), Field: "compensation", name: "lname4" },
        { title: this.$t('info.info_statement.56hzbiocwkg0'), Field: "deferred_tax", name: "lname6" },
        {
          title: this.$t('info.info_statement.56hzbiocwmo0'),
          Field: "operation_adjustment",
          name: "lname15",
        },
        {
          title: this.$t('info.info_statement.56hzbiocwoo0'),
          Field: "accounts_receivable",
          name: "lname16",
        },
        { title: this.$t('info.info_statement.56hzbiocwr40'), Field: "stock", name: "lname17" },
        { title: this.$t('info.info_statement.56hzbiocwt80'), Field: "impairment", name: "lname5" },
        {
          title: this.$t('info.info_statement.56hzbiocwvk0'),
          Field: "allocation_fee",
          name: "lname19",
        },
        { title: this.$t('info.info_statement.56hzbiocwxs0'), Field: "accounts_payable", name: "lname22" },
        { title: this.$t('info.info_statement.56hzbiocs640'), Field: "deferred", name: "lname24" },
        {
          title: this.$t('info.info_statement.56hzbiocx040'),
          Field: "accrued_expenses",
          name: "lname52",
        },
        {
          title: this.$t('info.info_statement.56hzbiocx2c0'),
          Field: "cash_flows",
          name: "lname37",
        },
        { title: this.$t('info.info_statement.56hzbiocx4k0'), Field: "fixed_assets", name: "lname33" },
        {
          title: this.$t('info.info_statement.56hzbiocx700'),
          Field: "intangible",
          name: "lname38",
        },
        {
          title: this.$t('info.info_statement.56hzbiocx940'),
          Field: "management",
          name: "lname35",
        },
        {
          title: this.$t('info.info_statement.56hzbiocxbc0'),
          Field: "acquisition_companies",
          name: "lname39",
        },
        {
          title: this.$t('info.info_statement.56hzbiocxdk0'),
          Field: "other_investment_cash_flow",
          name: "lname30",
        },
        {
          title: this.$t('info.info_statement.56hzbiocxg40'),
          Field: "other_investment_project",
          name: "lname40",
        },
        {
          title: this.$t('info.info_statement.56hzbiocrw80'),
          Field: "flow_investment_activities",
          name: "lkname11",
        },
        { title: this.$t('info.info_statement.56hzbiocxic0'), Field: "issue_shares", name: "lname41" },
        { title: this.$t('info.info_statement.56hzbiocxkg0'), Field: "share_repurchase", name: "lname42" },
        { title: this.$t('info.info_statement.56hzbiocxms0'), Field: "issue_bonds", name: "lname43" },
        { title: this.$t('info.info_statement.56hzbiocxp80'), Field: "bond_redemption", name: "lname44" },
        { title: this.$t('info.info_statement.56hzbiocxrk0'), Field: "dividend_payment", name: "lname45" },
        { title: this.$t('info.info_statement.56hzbiocxtw0'), Field: "bill_income", name: "lname46" },
        {
          title: this.$t('info.info_statement.56hzbiocxw00'),
          Field: "other_financing_cash_flow",
          name: "lname47",
        },
        {
          title: this.$t('info.info_statement.56hzbiocxy80'),
          Field: "other_financing_project",
          name: "lname48",
        },
        {
          title: this.$t('info.info_statement.56hzbiocw280'),
          Field: "financing_activities",
          name: "lhname53",
        },
        { title: this.$t('info.info_statement.56hzbiocy0g0'), Field: "deposit_increase", name: "lname49" },
        { title: this.$t('info.info_statement.56hzbiocy2o0'), Field: "opening_balance", name: "lname50" },
        { title: this.$t('info.info_statement.56hzbiocy540'), Field: "final_balance", name: "lname51" },
        {
          title: this.$t('info.info_statement.56hzbiocy7k0'),
          Field: "accounting_standard",
          show: true,
          name: "lname36",
        },
      ],
      dataList: [],
      stock: {},
      value: 0,
      list: [],
      lang: "zh-CN",
    };
  },
  created() {
    this.lang = localStorage.getItem("lang");
  },
  mounted() {
    var _this = this;
    this.$nextTick(function () {
      setTimeout(function () {
        if (_this.submit.market == "HKEX") {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.HKEX;
        } else if (
          _this.submit.market == "SSE" ||
          _this.submit.market == "SZSE"
        ) {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.CNH;
        } else if (_this.submit.market == "US") {
          _this.typeList = _this.USNav;
          _this.dataList = _this.US;
        }
        _this.getCharts();
      }, 100);
    });
  },
  methods: {
    PeriodChange(period) {
      this.OtherSubmit.period = period;
      this.getCharts();
    },
    //获取详情数据
    getCharts() {
      var _this = this;
        get_charts({
            symbol: _this.submit.symbol,
            market: _this.submit.market,
            securityType: _this.submit.securityType,
            type: _this.OtherSubmit.type,
            period: _this.OtherSubmit.period,
          }).then(function (res) {
          if (res.code == 1) {
            _this.list = res.data.list;
            _this.options = [];
            _this.list.forEach(function (res, index) {
              _this.options.push({ value: index, label: res.report_date });
            });
            console.log(_this.options);
            _this.stock = res.data.data.symbol;
          } else {
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    dealNum: function (num, show) {
      if (show) {
        return num;
      }
      if (num == "--" || num == "") {
        return "--";
      }
      let number = Number(num);
      if (number == 0) {
        return 0;
      } else if (this.lang == "zh-CN") {
        if (Math.abs(number) >= 100000000) {
          return (number / 100000000).toFixed(2) + this.$t('info.info_statement.56hzbiocya00');
        } else if (Math.abs(number) < 100000000 && Math.abs(number) >= 10000) {
          return (number / 10000).toFixed(2) + this.$t('info.info_statement.56hzbiocyck0');
        } else {
          return number.toFixed(2);
        }
      } else if (this.lang == "en") {
        if (Math.abs(number) >= 1000000000) {
          return (number / 1000000000).toFixed(2) + "B";
        } else if (
          Math.abs(number) >= 1000000 &&
          Math.abs(number) < 1000000000
        ) {
          return (number / 1000000).toFixed(2) + "M";
        } else if (Math.abs(number) >= 1000 && Math.abs(number) < 1000000) {
          return (number / 1000).toFixed(2) + "K";
        } else {
          return number;
        }
      }
    },
    ratio(index, value, obj, show) {
      if (show) {
        return "";
      }
      /**
       *
       * index  当前数据 即item
       * value  当前字段名
       * obj    所有的数据（总数据）
       * show   是否处理
       *
       * **/
      var number = 1;
      if (obj.length <= index + 1) {
        return `<span>--</span>`;
      }
      //许将算出的list进行判断 等于 NaN的时候显示--
      var list = (
        ((obj[index][value] - obj[index + number][value]) /
          obj[index + number][value]) *
        100
      ).toFixed(2);
      list = ["NaN", "-NaN", "Infinity", "-Infinity"].includes(list)
        ? "--"
        : list;
      // classList 颜色判断
      var classList = list == "--" || list == 0 ? "" : list > 0 ? "on" : "in";
      return `<span class="${classList}">${
        list == "--" ? "--" : list + "%"
      }</span>`;
    },
  },
  watch: {
    submit: {
      handler(val) {
        var _this = this;
        if (_this.submit.market == "HKEX") {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.HKEX;
        } else if (
          _this.submit.market == "SSE" ||
          _this.submit.market == "SZSE"
        ) {
          _this.Nav = _this.HKEXNav;
          _this.dataList = _this.CNH;
        } else if (_this.submit.market == "US") {
          _this.Nav = _this.USNav;
          _this.dataList = _this.US;
        }
        this.getCharts();
      },
      deep: true,
    },
  },
  filters: {},
};
</script>
<style lang="less">
.list {
  width: 100%;
  .typeList {
    li {
      float: left;
      font-size: 12px;
      color: @fbSix;
      line-height: 20px;
      margin-right: 20px;
      cursor: pointer;
    }
    li.hover {
      color: @hoverColor;
    }
  }
  .YearOnYear {
    color: @fff;
    font-size: 12px;
    line-height: 20px;
    .el-checkbox__inner {
      border: 1px solid @fbSix;
      background: none;
    }
    .is-checked .el-checkbox__inner {
      border: 1px solid @hoverColor;
      background: none;
    }
    .el-checkbox__inner::after {
      border: 1px solid @hoverColor;
      border-left: 0;
      border-top: 0;
    }
    .el-checkbox__label {
      font-size: 12px;
    }
  }
  .rights {
    font-size: 12px;
    color: @fff;
    line-height: 20px;
    .el-select {
      width: 100px;
    }
    .el-input__inner {
      height: 20px;
      line-height: 20px;
      background: none;
      border: none;
      font-size: 12px;
      padding: 0 5px;
      color: @fff;
    }
    .el-input__icon {
      line-height: 20px;
    }
  }
  .table {
    width: 100%;
    border: 1px solid @LightBorderLine;
    ul {
      width: 100%;
      li {
        font-size: 12px;
        color: @fbSix;
        border-bottom: 1px solid @LightBorderLine;
        line-height: 24px;
        p {
          padding: 0 10px;
        }
        .first {
          width: 50%;
          float: left;
          box-sizing: border-box;
        }
        .sec {
          float: left;
          width: 25%;
          color: @fff;
          border-left: 1px solid @LightBorderLine;
          box-sizing: border-box;
        }
        .three {
          float: right;
          width: 25%;
          color: @fff;
          border-left: 1px solid @LightBorderLine;
          box-sizing: border-box;
        }
      }
    }
  }
}
.el-popper li.el-select-dropdown__item {
  padding: 0;
  text-align: center;
}
</style>